import $ from 'jquery'
import { GET_LIST } from '../config/config.js'
import createItem from './createItem.js';
// 列表
export default class List {
  constructor(app) {
    this.app = app;
    this.$el = $('<div></div>');
  }
  // 获取数据
  loadData(){
    // 返回 Promise 实例 （fetch在Chrome中已经被支持了)
    return fetch(GET_LIST).then(res => {
      return res.json()
    })
  }
  // 生成列表
  initItemList(data){
    data.forEach(itemData => {
      //  创建一个 item 然后 init
      let item = createItem(this,itemData)
      item.init()
    })
  }
  // 渲染
  render() {
    // 将创建的div添加到index.html中id=app的div中
    this.app.$el.append(this.$el)
  }
  // 列表初始化
  init() {
    this.loadData().then(data => {
      this.initItemList(data)
    }).then(() => {
      // 渲染
      this.render()
    })
  }
}